<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>首页</title>

	<link rel="stylesheet" href="/static/css/common/f7/framework7.ios.min.css">
  <link rel="stylesheet" href="/static/css/common/f7/framework7.ios.colors.min.css">
  <link rel="stylesheet" href="/static/css/common/base.css">
</head>
<body>
	<div class="statusbar-overlay"></div>
    <!-- Panels overlay-->
    <div class="panel-overlay"></div>

    <!-- Views -->
    <div class="views tabs toolbar-through">
      <!-- Your main view, should have "view-main" class -->
      <div id="index" data-page="index" class="view tab active">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center">首页</div>
            <div class="right">
              <a href="#" class="link icon-only"><i class="iconfont">&#xe602;</i></a>
            </div>
          </div>
        </div>
        <!-- 页面集合 -->
        <div class="pages navbar-through">
          <!-- 首页内容 -->
          <div data-page="index" class="page">
            <!-- 页面内容 -->
            <div class="page-content">
              <!-- <div class="content-block-title">Facebook Cards</div> -->

                <div class="card main-card">
                <div class="card-header no-border">
                  <div class="main-avatar"><img src="/static/image/common/qisehua-small.jpg" width="34" height="34"></div>
                  <div class="main-name">七色花</div>
                  <div class="main-date">2016年4月9日23:21</div>
                </div>
                <div class="card-content"><img src="/static/image/common/friends-logo.png" width="100%"></div>
                <div class="card-footer no-border">
                  <a href="#" class="link">分享</a>
                  <a href="#" class="link">评论(20)</a>
                  <a href="#" class="link">点赞(128)</a>
                </div>
                </div>


                <div class="card main-card">
	                <div class="card-header">
	                  <div class="main-avatar"><img src="/static/image/common/friends-logo.png" width="34" height="34"></div>
	                  <div class="main-name">齐天大圣</div>
	                  <div class="main-date">2016年4月9日23:22</div>
	                </div>
	                <div class="card-content">
	                  <div class="card-content-inner">
	                    <p>这张照片是我刚刚下班的时候，在路上拍的!你们觉得好看吗？</p>
	                    <img src="/static/image/common/1460116453670.jpg" width="100%">
	                  </div>
	                </div>
	                <div class="card-footer">
	                  <a href="#" class="link">分享</a>
	                  <a href="#" class="link">评论(0)</a>
	                  <a href="#" class="link">点赞(5)</a>
	                </div>
                </div>

								<div class="card main-card">
                <div class="card-header no-border">
                  <div class="main-avatar"><img src="/static/image/common/qisehua-small.jpg" width="34" height="34"></div>
                  <div class="main-name">七色花</div>
                  <div class="main-date">2016年4月9日23:21</div>
                </div>
                <div class="card-content"><img src="/static/image/common/friends-logo.png" width="100%"></div>
                <div class="card-footer no-border">
                  <a href="#" class="link">分享</a>
                  <a href="#" class="link">评论(20)</a>
                  <a href="#" class="link">点赞(128)</a>
                </div>
                </div>


                <div class="card main-card">
	                <div class="card-header">
	                  <div class="main-avatar"><img src="/static/image/common/friends-logo.png" width="34" height="34"></div>
	                  <div class="main-name">齐天大圣</div>
	                  <div class="main-date">2016年4月9日23:22</div>
	                </div>
	                <div class="card-content">
	                  <div class="card-content-inner">
	                    <p>这张照片是我刚刚下班的时候，在路上拍的!你们觉得好看吗？</p>
	                    <img src="/static/image/common/1460116453670.jpg" width="100%">
	                  </div>
	                </div>
	                <div class="card-footer">
	                  <a href="#" class="link">分享</a>
	                  <a href="#" class="link">评论(0)</a>
	                  <a href="#" class="link">点赞(5)</a>
	                </div>
                </div>

								<div class="card main-card">
                <div class="card-header no-border">
                  <div class="main-avatar"><img src="/static/image/common/qisehua-small.jpg" width="34" height="34"></div>
                  <div class="main-name">七色花</div>
                  <div class="main-date">2016年4月9日23:21</div>
                </div>
                <div class="card-content"><img src="/static/image/common/friends-logo.png" width="100%"></div>
                <div class="card-footer no-border">
                  <a href="#" class="link">分享</a>
                  <a href="#" class="link">评论(20)</a>
                  <a href="#" class="link">点赞(128)</a>
                </div>
                </div>


                <div class="card main-card">
	                <div class="card-header">
	                  <div class="main-avatar"><img src="/static/image/common/friends-logo.png" width="34" height="34"></div>
	                  <div class="main-name">齐天大圣</div>
	                  <div class="main-date">2016年4月9日23:22</div>
	                </div>
	                <div class="card-content">
	                  <div class="card-content-inner">
	                    <p>这张照片是我刚刚下班的时候，在路上拍的!你们觉得好看吗？</p>
	                    <img src="/static/image/common/1460116453670.jpg" width="100%">
	                  </div>
	                </div>
	                <div class="card-footer">
	                  <a href="#" class="link">分享</a>
	                  <a href="#" class="link">评论(0)</a>
	                  <a href="#" class="link">点赞(5)</a>
	                </div>
            		</div>
            </div>
          </div>
        </div>
      </div>


      <div id="userInfo" data-page="userInfo" class="view tab">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
            <div class="center">联系人</div>
          </div>
        </div>
        <!-- 页面集合 -->
        <div class="pages navbar-through">
          <!-- 首页内容 -->
          <div data-page="index" class="page">
            <!-- 页面内容 -->
            <div class="page-content">

							<div class="content-block-title">你一共有15位联系人</div>

              <div class="list-block">
								<ul>
									<li class="swipeout">
										<div class="swipeout-content item-content">
											<div class="item-media">
												<img width="50px" src="/static/image/common/qisehua-small.jpg">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
		                        <div class="item-title">七色花</div>
														<div class="item-after">洋洋，你吃完晚饭了吗？</div>
		                    </div>
												<div class="item-after">
													 <span class="badge bg-green">5</span>
												</div>
											</div>
										</div>

										<div class="swipeout-actions-right">
											<a href="#" class="bg-red">删除</a>
										</div>
									</li>

									<li class="swipeout">
										<div class="swipeout-content item-content">
											<div class="item-media">
												<img width="50px" src="/static/image/common/qisehua-small.jpg">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
														<div class="item-title">七色花</div>
														<div class="item-after">洋洋，你吃完晚饭了吗？</div>
												</div>
												<div class="item-after">
													 <span class="badge bg-green">5</span>
												</div>
											</div>
										</div>

										<div class="swipeout-actions-right">
											<a href="#" class="bg-red">删除</a>
										</div>
									</li>


									<li class="swipeout">
										<div class="swipeout-content item-content">
											<div class="item-media">
												<img width="50px" src="/static/image/common/qisehua-small.jpg">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
		                        <div class="item-title">七色花</div>
														<div class="item-after">洋洋，你吃完晚饭了吗？</div>
		                    </div>
												<div class="item-after">
													 <span class="badge bg-green">5</span>
												</div>
											</div>
										</div>

										<div class="swipeout-actions-right">
											<a href="#" class="bg-red">删除</a>
										</div>
									</li>


									<li class="swipeout">
										<div class="swipeout-content item-content">
											<div class="item-media">
												<img width="50px" src="/static/image/common/qisehua-small.jpg">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
		                        <div class="item-title">七色花</div>
														<div class="item-after">洋洋，你吃完晚饭了吗？</div>
		                    </div>
												<div class="item-after">
													 <span class="badge bg-green">5</span>
												</div>
											</div>
										</div>

										<div class="swipeout-actions-right">
											<a href="#" class="bg-red">删除</a>
										</div>
									</li>



								</ul>
							</div>
            </div>
          </div>
        </div>

      </div>

			<!-- Bottom Toolbar-->
			<div class="toolbar tabbar">
				<div class="toolbar-inner">
						<a href="#index" class="active tab-link">
								<i class="iconfont">&#xe61a;</i>
						</a>
						<a href="#" data-popup=".popup-publish" class="tab-link open-popup">
								<i class="iconfont">&#xe616;</i>
						</a>
						<a href="#userInfo" class="tab-link">
								<i class="iconfont">&#xe61b;</i>
						</a>
				</div>
			</div>



    </div>

    <div class="popup popup-publish">
				<span class="close-popup" style="float:right;margin:2px;"><i class="iconfont" style="color:#C4C4C4">&#xe617;</i></span>
				<div class="list-block">
				  <ul>
				    <li>
				      <div class="item-content">
				        <div class="item-inner">
				          <div class="item-input">
				            <textarea placeholder="记录下你今天的心情……"></textarea>
				          </div>
				        </div>
				      </div>
				    </li>

				  </ul>
				</div>
				<div class="content-block">
					<p><a class="button button-big button-fill color-orange">上传照片</a></p>
					<p><a class="button button-big button-fill color-green">发表</a></p>
				</div>
    </div>

    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="/static/js/common/f7/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="/static/js/friends/main/main.js"></script>
</body>
</html>
